<template>
  <div>
    <open-modal
      :openModal="showOpenModal"
      @closeModal="handleClickCloseRecommend"
    >
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-ph24">
        <div class="c-p c-bd-b1">
          <div class="c-w100 c-flex-row c-aligni-center c-fs28 c-hh88 c-fc-xblack">{{recommendObject.nickname}}的推荐</div>
          <i
            class="iconfont c-pa c-p-t30 c-p-r0 c-fc-sgray c-fs30"
            @click="handleClickCloseRecommend"
          >&#xe84e;</i>
        </div>
        <div class="c-w100 c-bg-white c-maxh552 c-contexty-scroll c-scroll-touch">
          <div
            class="c-flex-row c-pv26 c-bd-b1"
            v-for="(item, index) in recommendObject.relationContent"
            :key="index"
          >
            <div class="c-ww180 c-hh120 c-p c-br12">
              <img
                class="c-w100 c-h c-object-fit-cover c-br12"
                :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))"
                alt=""
              >
              <div class="c-pa c-p-b0 c-p-r0 c-ww52 c-hh26 c-fs18 c-fc-white c-translucent-balck50 c-br-tl12 c-br-br12 c-flex-row c-flex-center">{{filterName(item.typeBar, item.type)}}</div>
            </div>
            <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0 c-ml20">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</div>
              <div class="c-flex-row c-justify-sb c-aligni-center">
                <template v-if="item.typeBar == 1">
                  <div
                    v-if="item.isSaleOnly == 1"
                    class="theme-fc c-fs24"
                  >
                    <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>
                    {{item.payType | priceValueFilter(item.price, 5)}}
                  </div>
                </template>
                <template v-if="item.typeBar == 4">
                  <div class="theme-fc c-fs24">
                    <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>
                    {{item.payType | priceValueFilter(item.price, 9)}}
                  </div>
                </template>
                <template v-if="item.typeBar == 5">
                  <div class="theme-fc c-fs24">
                    <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>
                    {{item.payType | priceValueFilter(item.price, 11)}}
                  </div>
                </template>
                <template v-if="item.typeBar == 6">
                  <span class="theme-fc c-fs24">{{item.price.split('~')[0]==item.price.split('~')[1] && item.price.split('~')[0] * 1 == 0 ? '免费': item.price.split('~')[0]==item.price.split('~')[1] ? `${item.price.split('~')[0]}`:`${item.price.split('~')[0]}起`}}</span>
                </template>
                <template v-if="item.typeBar == 7">
                  <div class="theme-fc c-fs24">
                    <span v-if="item.price * 1 > 0">{{'￥' | iosPriceFilter}}</span>
                    {{item.payType | priceValueFilter(item.price, 41)}}
                  </div>
                </template>
                <template v-if="item.typeBar == 8">
                  <div class="theme-fc c-fs24">
                    <span>{{'￥' | iosPriceFilter}}{{ item.price | formatNumber }}</span>
                    <span
                      v-if="item.originalPrice * 1 > 0"
                      class="c-fs24 c-fc-gray c-text-decoration-through c-ml12"
                    >{{'￥' | iosPriceFilter}}{{item.originalPrice | formatNumber}}</span>
                  </div>
                </template>
                <div class="c-ww104 c-hh40 theme-bg c-fc-white c-flex-row c-flex-center c-fs18 c-br32" @click="handClickViewDetail(item)">查看</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { goDetails } from "@/utils/goDetails.js"
import OpenModal from "@/components/templates/common/openModal.vue";
export default {
  name: 'CircleRecommend',
  props: {
    showOpenModal: {
      type: Boolean,
      default: false
    },
    recommendObject: {
      type: Object,
      default: {}
    }
  },
  components: {
    OpenModal
  },
  computed: {
    filterName() {
      return function (typeBar, type) {
        if (typeBar == 1) {
          if (type == 0) {
            return '视频'
          } else if (type == 1) {
            return '音频'
          } else {
            return '图文'
          }
        } else if (typeBar == 4) {
          return '专栏'
        } else if (typeBar == 5) {
          return '测评'
        } else if (typeBar == 6) {
          return '活动'
        } else if (typeBar == 7) {
          return '打卡'
        } else if (typeBar == 8) {
          return '商城'
        }
      }
    }
  },
  methods: {
    handClickViewDetail(item) {
      let prodType = '';
      if (item.typeBar == 1) {
        prodType = global.ckFrom.course
      } else if (item.typeBar == 4) {
        prodType = global.ckFrom.column
      } else if (item.typeBar == 5) {
        prodType = global.ckFrom.exam
      } else if (item.typeBar == 6) {
        prodType = global.ckFrom.activity
      } else if (item.typeBar == 7) {
        prodType = global.ckFrom.clockIn
      } else if (item.typeBar == 8) {
        prodType = global.ckFrom.shopping
      }
      goDetails(this, prodType, item.rId, '', item.type)
    },
    handleClickCloseRecommend() {
      this.$emit('handleClickCloseRecommend')
    }
  }
}
</script>

<style lang="less" scoped>
</style>